<template>
  <div>
    <c-breadcrumb v-if="isBreadcrumb" class="mb-lg" />
    <el-card
      class="main-card"
      :style="{
        'min-height': minHeight ? minHeight : '80vh',
      }"
    >
      <template #header v-if="slots.operate || title">
        <div class="flex-y-center wh">
          <div class="main-card_title" v-if="title">{{ title }}</div>
          <div class="flex-x-end flex-1" v-if="slots.operate">
            <slot name="operate"></slot>
          </div>
        </div>
      </template>
      <slot></slot>
    </el-card>
  </div>
</template>
<script setup>
import { ref, useSlots } from "vue";
import { useRoute } from "vue-router";
const slots = useSlots();
const route = useRoute();
const props = defineProps({
  isBreadcrumb: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
  minHeight: {
    type: String,
    default: "",
  },
});
</script>
<style lang="less" scoped>
:deep(.el-card) {
  // .el-card__header {
    // border-bottom:0px !important;
  // }
  .el-card__body {
    padding: 0px !important;
  }
}

.main-card {
  box-shadow: 0 0px 0px #ccc;
  border: 0px;
  .main-card_title {
    font-size: 16px;
    font-weight: 500;
    color: #202020;
  }
}
</style>